<template>
<div class="head-top">
    <div class="head-top-l">{{time}}</div>
    <div class="head-top-r">
        <div class="green-battery">
            <div class="head-top-rl">35%</div>
            <div class="head-top-rm"><div style="width:35%"></div></div>
            <div class="head-top-rr"></div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'Battery',
    data: function(){
        return {
            time:new Date().getHours().toString()+':'+new Date().getMinutes().toString(),
            battery:''
        }
    },
    methods:{
        refreshTime:function(){
            this.time = new Date().getHours().toString()+':'+new Date().getMinutes().toString();
        }
    },
    mounted() {
        navigator.getBattery().then(function(battery) {

  console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  console.log("Battery level: " + battery.level * 100 + "%");
  console.log("Battery charging time: " + battery.chargingTime + " seconds");
  console.log("Battery discharging time: " + battery.dischargingTime + " seconds");

  battery.addEventListener('chargingchange', function() {
    console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  });

  battery.addEventListener('levelchange', function() {
    console.log("Battery level: " + battery.level * 100 + "%");
  });

  battery.addEventListener('chargingtimechange', function() {
    console.log("Battery charging time: " + battery.chargingTime + " seconds");
  });

  battery.addEventListener('dischargingtimechange', function() {
    console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
  });

});
        setInterval(this.refreshTime, 1000);
    }
}
</script>
<style scoped>
.head-top{background:#e7e9eb;height:30px;line-height:30px;width:100%;position:relative}
.head-top-l{color:#050505;float:left;font-family:arial;font-size:16px;font-weight:bold;padding-left:5px}
.head-top-r{float:right}
.head-top-rl,.head-top-rm,.head-top-rr{float:left}
.green-battery .head-top-rl{color:#040404;font-size:18px;font-family:arial}
.green-battery .head-top-rm{border:1px solid #01aa01;width:22px;height:14px;margin:7px 0 0 6px}
.green-battery .head-top-rm div{background:#01aa01;height:14px}
.green-battery .head-top-rr{width:3px;height:4px;background:#01aa01;margin:13px 10px 0 0}
.red-battery .head-top-rl{color:#040404;font-size:18px;font-family:arial}
.red-battery .head-top-rm{border:1px solid #a21f1f;width:22px;height:14px;margin:7px 0 0 6px}
.red-battery .head-top-rm div{background:#cf000a;height:14px}
.red-battery .head-top-rr{width:3px;height:4px;background:#a21f1f;margin:13px 10px 0 0}

</style>
